<template>
    <div>
        <el-container style="position: absolute; left: 0px;bottom: 0px;right: 0px;top: 0px;overflow: hidden;">
            <el-header class="d-flex align-items-center" style="background-color: #545c64;">
                <a class="h5 text-light mb-0 mr-auto">{{$conf.logo}}</a>
                <el-menu :default-active="navBar.active" mode="horizontal" @select="handleSelect"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item :index="index|numToString" v-for="(item,index) in navBar.list" :key="index">
                        {{item.name}}</el-menu-item>
                    <el-submenu index="100">
                        <template slot="title">
                            <el-avatar size="small"
                                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
                            </el-avatar> 一起摇摆
                        </template>
                        <el-menu-item index="100-1">修改</el-menu-item>
                        <el-menu-item index="100-2">退出</el-menu-item>
                    </el-submenu>
                </el-menu>

            </el-header>
            <el-container style="height: 100%;">
                <!-- 侧边布局 -->
                <el-aside width="200px">
                    <el-menu style="height: 100%;" :default-active="slideMenusActive" @select="asideSelect">
                        <el-menu-item :index="index.toString()" v-for="(item,index) in slideMenus" :key="index">
                            <i :class="item.icon"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <!-- 主布局 -->
                <el-main class="bg-light" style="padding-bottom: 60px;position: relative;">
                    <!-- 面包屑导航 -->
                    <div class="border-bottom mb-3" style="padding: 20px;margin: -20px;" v-if="bran.length > 0">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item v-for="(item,index) in bran" :key="index" :to="{ path: item.path }">{{item.title}}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <!-- 主内容 -->
                    <router-view></router-view>
                     <!-- 回到顶部 -->
                    <el-backtop target=".el-main" :bottom="backtopBottom">
                        <div
                          style="height: 100%;
                          width: 100%;
                          background-color: #f2f5f6;
                          box-shadow: 0 0 6px rgba(0,0,0, .12);
                          text-align: center;
                          line-height: 40px;
                          color: #1989fa;"
                        >
                          UP
                        </div>
                      </el-backtop>
                </el-main>
                
            </el-container>
        </el-container>
        
    </div>
</template>

<script>
    import common from '../common/mixins/common.js'
    export default {
        mixins: [common],
        data() {
            return {
                navBar: [],
                bran: [],
                storageKey: 'navActive',
                backtopBottom: 100
            }
        },
        created() {
            // 获取面包屑导航
            this.getRouterBran()
            // 初始化菜单
            this.navBar = this.$conf.navBar
            // 初始化选中菜单
			this.__initNavBar()
        },
        computed: {
            slideMenusActive: {
                get() {
                    return this.navBar.list[this.navBar.active].subActive || '0'
                },
                set(val) {
                    this.navBar.list[this.navBar.active].subActive = val
                }
            },
            slideMenus() {
                return this.navBar.list[this.navBar.active].submenu || []
            }
        },
        watch: {
            '$route': function(to, from) {
                // 本地存储
                localStorage.setItem(this.storageKey, JSON.stringify({
                    top: this.navBar.active || 0,
                    left: this.slideMenusActive || 0
                }))
                this.getRouterBran()
            }
        },
        methods: {
            __initNavBar() {
                let r = localStorage.getItem(this.storageKey)
                if(r) {
                    r = JSON.parse(r)
                    this.navBar.active = r.top
                    this.slideMenusActive = r.left
                }
            },
            // 获取面包屑导航
            getRouterBran() {
                let b = this.$route.matched.filter(v => v.name)
                let arr = []
                b.forEach((v, k) => {
                    // 过滤layout和index
                    if (v.name === 'index' || v.name === 'layout') return
                    arr.push({
                        name: v.name,
                        path: v.path,
                        title: v.meta.title
                    })
                })
                if (arr.length > 0) {
                    arr.unshift({ name: 'index', path: '/index', title: '后台首页' })
                }
                this.bran = arr
            },
            handleSelect(key, keyPath) {
                this.navBar.active = key
                // 默认选中跳转到当前激活
			    this.slideMenusActive = '0'
                if(this.slideMenus.length > 0){
                    let pathname = this.slideMenus[this.slideMenusActive].pathname
                    // 默认选中跳转到当前激活
                    this.$router.push({
                        name: pathname
                    })
                }
            },
            asideSelect(key, keyPath) {
                this.slideMenusActive = key
                let pathname = this.slideMenus[key].pathname
                // // 跳转到指定页面
                this.$router.push({
                    name: pathname
                })
            }
        }
    }
</script>

<style>

</style>